<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>课堂抽人系统</title>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background: url('https://example.com/robot-background.jpg') no-repeat center center fixed; /* 替换为实际的图片链接 */
        background-size: cover;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        text-align: center;
    }
    .container {
        background-color: rgba(0, 0, 0, 0.7);
        padding: 20px;
        border-radius: 10px;
        max-width: 500px;
        width: 100%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }
    h1 {
        margin-top: 0;
        color: #ffd700;
    }
    .input-group {
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .input-group input {
        padding: 5px;
        margin-right: 10px;
        width: 200px;
        border-radius: 5px;
    }
    button {
        padding: 5px 10px;
        margin: 5px;
        border-radius: 5px;
        cursor: pointer;
    }
    ul {
        list-style-type: none;
        padding: 0;
        margin: 20px 0;
        text-align: left;
    }
    li {
        margin-bottom: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .delete-button {
        background-color: red;
        color: white;
        border: none;
        cursor: pointer;
        padding: 2px 5px;
        border-radius: 5px;
    }
    #rollingName {
        font-size: 2em;
        margin: 20px 0;
        animation: blink 1s step-end infinite;
    }
    @keyframes blink {
        from, to { opacity: 1; }
        50% { opacity: 0; }
    }
</style>
</head>
<body>

<div class="container">
    <h1>课堂抽奖系统</h1>

    <div class="input-group">
        <input type="text" id="newStudent" placeholder="输入学生姓名" />
        <button onclick="addStudent()">添加学生</button>
    </div>

    <button onclick="clearStudents()">清空学生名单</button>
    <button onclick="pickStudent()">随机抽取学生</button>
    <button onclick="toggleStudentList()">查看/隐藏学生名单</button>

    <ul id="studentList"></ul>
    <div id="currentStudents"></div>
    <div id="rollingName"></div>
</div>

<script>
    let students = [];
    let rollingInterval;
    let isRolling = false;

    function addStudent() {
        const studentName = document.getElementById('newStudent').value.trim();
        if (studentName !== '') {
            students.push(studentName);
            updateStudentList();
            document.getElementById('newStudent').value = '';
        }
    }

    function clearStudents() {
        students = [];
        updateStudentList();
    }

    function pickStudent() {
        if (students.length === 0) {
            alert("没有学生可以抽取，请先添加学生！");
            return;
        }
        if (!isRolling) {
            rollNames();
        }
    }

    function rollNames() {
        if (students.length === 0) {
            return;
        }
        let currentIndex = 0;
        const rollingElement = document.getElementById('rollingName');
        rollingInterval = setInterval(() => {
            rollingElement.textContent = students[currentIndex];
            currentIndex = (currentIndex + 1) % students.length;
        }, 100);

        isRolling = true;
        setTimeout(stopRolling, 5000); // 滚动5秒后停止
    }

    function stopRolling() {
        clearInterval(rollingInterval);
        isRolling = false;
        if (students.length > 0) {
            const randomIndex = Math.floor(Math.random() * students.length);
            alert("被抽中的学生是：" + students[randomIndex]);
        }
        document.getElementById('rollingName').textContent = ''; // 清空滚动的名字
    }

    function updateStudentList() {
        const listElement = document.getElementById('studentList');
        listElement.innerHTML = ''; // 清空现有列表
        students.forEach((student, index) => {
            const li = document.createElement('li');
            li.textContent = `${index + 1}. ${student}`;
            listElement.appendChild(li);
        });
        if (students.length === 0) {
            listElement.textContent = '请添加学生';
        }
        updateCurrentStudentsList(); // 更新查看学生名单的内容
    }

    function toggleStudentList() {
        const currentStudentsElement = document.getElementById('currentStudents');
        currentStudentsElement.style.display = currentStudentsElement.style.display === 'none' ? 'block' : 'none';
    }

    function updateCurrentStudentsList() {
        const currentStudentsElement = document.getElementById('currentStudents');
        currentStudentsElement.innerHTML = ''; // 清空现有列表
        students.forEach((student, index) => {
            const div = document.createElement('div');
            div.className = 'student-item';
            const span = document.createElement('span');
            span.textContent = `${index + 1}. ${student}`;
            div.appendChild(span);
            const deleteButton = document.createElement('button');
            deleteButton.className = 'delete-button';
            deleteButton.textContent = '删除';
            deleteButton.onclick = () => removeStudent(index);
            div.appendChild(deleteButton);
            currentStudentsElement.appendChild(div);
        });
        if (students.length === 0) {
            currentStudentsElement.textContent = '没有学生';
        }
    }

    function removeStudent(index) {
        if (index >= 0 && index < students.length) {
            students.splice(index, 1);
            updateStudentList();
        }
    }

    // 初始化时更新学生名单
    updateStudentList();
</script>

</body>
</html>